import { StyleSheet, Text, View, Image, Pressable, ScrollView } from 'react-native';
import React, { useState, useEffect } from 'react';
import { useNavigation, useRoute } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import { NavBarHeader, ContentStatus } from '~/components';
import { appStore, deviceStore, observer } from '~/store';
import BleConnection from '~/utils/ble/connect';
import { px2dp, scale, width } from '~/utils/px2dp';
import { yjhDevices } from '~/utils/deviceMenues';

const Bleconnect = BleConnection.getInstance();
export default observer(() => {
    const { t } = useTranslation();
    const router: any = useRoute();
    const {
        routePage = '',
        body_index = '',
        course_id = '',
        titleId = '',
        actionType = '',
        id,
        write_id,
        oldDeviceSn,
    } = router?.params || {};
    const navigation: any = useNavigation();
    const searchDevices = deviceStore.device.searchDevices || [];
    const [selectDevice, setSelecDevice] = useState<any>({});
    const selectDeviceInfo = (row) => {
        setSelecDevice(row);
    };
    const onPress = () => {
        if (selectDevice?.device_sn) {
            navigation.navigate('ScanDeviceResult', {
                device_sn: selectDevice?.device_sn,
                routePage,
                body_index,
                course_id,
                titleId,
                actionType,
                id,
                write_id,
                oldDeviceSn,
            });
        } else {
            Bleconnect.scan(5);
        }
    };
    useEffect(() => {
        Bleconnect.scan(5);
    }, []);
    return (
        <View style={styles.container}>
            <NavBarHeader title={t('SearchDevice.title')} />
            <ScrollView contentContainerStyle={styles.contentContainerStyle}>
                {Array.isArray(searchDevices) && searchDevices.length > 0 ? (
                    <View style={styles.content}>
                        {searchDevices.map((item, index) => {
                            if (
                                routePage == 'Acupoints' &&
                                item.device_code !== 'HA01YY' &&
                                item.device_code !== 'HA01YD'
                            )
                                return;
                            return (
                                <View style={[styles.flex, styles.list]} key={index}>
                                    <View style={styles.flex}>
                                        <Image style={styles.device_image} source={{ uri: item.device_image }} />
                                        <View style={styles.deviceInfo}>
                                            {appStore.app.language == 'zh' ? (
                                                <Text style={styles.num}>
                                                    {item?.prevName}
                                                    {t('SearchDevice.t11')}
                                                    {yjhDevices.indexOf(item?.device_code) !== -1
                                                        ? item.device_name
                                                        : t('SearchDevice.t10') + item.device_name}
                                                </Text>
                                            ) : (
                                                <Text style={styles.num}>
                                                    {t('SearchDevice.t11')}
                                                    {item?.prevName}
                                                    {/* {item?.device_code == 'YY01'
                                                        ? item.device_name
                                                        : t('SearchDevice.t10') + item.device_name} */}
                                                </Text>
                                            )}

                                            <Text style={styles.t1}>
                                                {t('SearchDevice.t1')}：{item?.device_code}
                                            </Text>
                                            <Text style={styles.t1}>SN：{item?.device_sn}</Text>
                                        </View>
                                    </View>
                                    <Pressable
                                        onPress={() => selectDeviceInfo(item)}
                                        style={[
                                            styles.bootom_button,
                                            styles.select_button,
                                            item?.device_sn == selectDevice?.device_sn && {
                                                backgroundColor: '#41C160',
                                            },
                                        ]}>
                                        <Text style={styles.select_buttonText}>
                                            {item?.device_sn == selectDevice?.device_sn
                                                ? t('SearchDevice.t2')
                                                : t('SearchDevice.t3')}
                                        </Text>
                                    </Pressable>
                                </View>
                            );
                        })}
                    </View>
                ) : (
                    <ContentStatus
                        status="empty"
                        ImageStyle={styles.ImageStyle}
                        source={{
                            title: t('SearchDevice.t4'),
                            image: {
                                uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2023/11/58c6120231109173311397.png',
                            },
                        }}
                    />
                )}
            </ScrollView>
            <View style={styles.bottom}>
                <Pressable style={styles.bootom_button} onPress={onPress}>
                    <Text style={styles.bootom_buttonText}>
                        {selectDevice?.device_sn ? t('SearchDevice.t5') : t('SearchDevice.t6')}
                    </Text>
                </Pressable>
            </View>
        </View>
    );
});

const styles = StyleSheet.create({
    flex: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    container: {
        flex: 1,
    },
    contentContainerStyle: {
        flexGrow: 1,
        paddingBottom: '40%',
    },
    content: {
        marginHorizontal: px2dp(32),
    },
    ImageStyle: {
        width: px2dp(400),
        height: px2dp(400),
    },
    list: {
        backgroundColor: '#fff',
        padding: px2dp(24),
        borderRadius: px2dp(12),
        marginTop: px2dp(22),
        justifyContent: 'space-between',
    },
    device_image: {
        width: px2dp(120),
        height: px2dp(120),
    },
    deviceInfo: {
        marginLeft: px2dp(16),
    },
    num: {
        color: '#191919',
        marginBottom: px2dp(12),
        fontSize: px2dp(30),
    },
    sn: {
        color: '#000',
        fontSize: scale(28),
        marginBottom: px2dp(12),
    },
    t1: {
        color: '#a4a4a4',
        fontSize: scale(24),
        marginBottom: px2dp(12),
    },
    select_button: {
        width: px2dp(100),
        height: px2dp(60),
        borderRadius: px2dp(40),
    },
    select_buttonText: {
        color: '#fff',
        fontSize: scale(24),
    },
    bottom: {
        backgroundColor: '#fff',
        position: 'absolute',
        width: width,
        paddingHorizontal: px2dp(64),
        bottom: 0,
        paddingVertical: px2dp(64),
    },
    bootom_button: {
        backgroundColor: '#242D56',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: px2dp(16),
        height: px2dp(100),
    },
    bootom_buttonText: {
        color: '#fff',
        fontSize: scale(32),
        fontWeight: 'bold',
    },
});
